<template>
	<view >
	<view class='opAdd'>
		<view class="forms">
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">店铺名称</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal" >
						 <input type="text" placeholder="请填写店铺名称" v-model="store_name"  >
						
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">联系人姓名</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal" >
						 <input type="text" placeholder="请填写联系人姓名" v-model="trueName"  >
						
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">联系人电话</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal" >
						 <input type="text" placeholder="请填写联系人电话" v-model="tel"  >
						
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">省市区</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal" >
						 <AddressPicker :level="3" @change='selAdd'>
						 	<input type="text" placeholder="请选择省市区" v-model="area" disabled placeholder-style="color:#999999;">
						 </AddressPicker>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">详细地址</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal">
						<input type="text" v-model="address" placeholder="请输入详细地址">
					</view>
				</view>
			</view>
			
			<view class="lineTit" style="color:red">请填写详细地址、具体门牌号，例幸福小区B座1802室</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">门头照</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal">
						<view class="upImg imgPublic" @click='checkchoose(1)'>
							<image v-if='image1' :src='imgDomain + image1' mode="widthFix"></image>
							<image v-else src="https://wx.gdxixiashi.com/public/images/person/comment_up.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">营业执照或身份证</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal">
						<view class="upImg imgPublic" @click='checkchoose(2)'>
							<image v-if='image2' :src='imgDomain + image2' mode="widthFix"></image>
							<image v-else src="https://wx.gdxixiashi.com/public/images/person/comment_up.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">易拉宝图片</view>
				<view class="lineVal dFlex jEnd_aCenter">
					<view class="showVal">
						<view class="upImg imgPublic" @click='checkchoose(3)'>
							<image v-if='image3' :src='imgDomain + image3' mode="widthFix"></image>
							<image v-else src="https://wx.gdxixiashi.com/public/images/person/comment_up.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="btn" @tap='saveInfo'>
				保存信息
			</view>
		</view>
	</view>
	
	</view>
</template>

<script>
	import AddressPicker from "@/components/address-picker/AddressPicker.vue"
	export default {
		components:{
			AddressPicker
		},
		data() {
			return {
				store_name:"",
				trueName:"",
				tel:"",
				area:"",
				address:'',
				image1:'',
				image2:"",
				image3:"",
				imgDomain:getApp().globalData.imgDomain,
				chengshiArr:[],
				province_one:{},
				city_one:{},
				area_one:{},
			};
		},
		onLoad() {
		},
		onShow(){
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 选择省市区
			chooseArea(){
				uni.showModal({
					title:'申请权限',
					content:'本次申请使用您的位置权限用于在地图上选择的位置，是否同意',
					success:(op)=>{
						if(op.confirm){
							uni.chooseLocation({
								success: (locate) => {
									console.log(locate);
									var reg = /.+?(省|市|自治区|自治州|县|区)/g // 省市区的正则
									
									uni.request({
										url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=location',//腾讯官方逆解析接口，可直接复制
										data: {
											location: locate.latitude + ',' + locate.longitude,
											'key': getApp().globalData.mapKey,//自己申请的Key
										},
										method: "GET",
										success:(res)=>{
											res = res.data;
											if(res.status == 0){
												this.area = res.result.address_component.province+"_"+res.result.address_component.city+'_'+res.result.address_component.district;
												this.address =locate.name;
											}else{
												uni.showToast({
													title:'地理位置解析失败',
													icon:"none"
												})
											}
										},
										fail: res=> {
											console.log(res.errMsg,'解析失败返回的错误信息');
										}
									})
									
								},
								fail:(err)=>{
									console.log(err);
									// #ifdef MP-WEIXIN
									if(err.errno == '104'){
										uni.showModal({
											content:'重新授权后可设置所在地区，是否现在去授权？',
											success: (op) => {
												if(op.confirm){
													uni.openSetting({
														success(res) {
															console.log(res.authSetting)
														}
													});
												}
											},
											fail:(err)=>{
												console.log(err);
											}
										})
									}
									// #endif
								}
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				
			},
			// 选择省市区
			selAdd(e){
				console.log(e);
				 // 省
				this.province_one = e.data[0];
				// 市
				this.city_one = e.data[1];
				// 区
				this.area_one = e.data[2];
				this.area_one.area_id=this.area_one.id;
				this.area = e.data[0].name+'-'+e.data[1].name+'-'+e.data[2].name; 
			},
			 selArea(e){
				this.area = e.detail.value.join('_');
			}, 
			// 保存信息
			saveInfo(){
				if(!this.store_name){
					uni.showToast({
						title:'需填写店铺名称',
						icon:"none"
					})
					return;
				}
				if(!this.trueName){
					uni.showToast({
						title:'需填写联系人姓名',
						icon:"none"
					})
					return;
				}
				if(!this.tel){
					uni.showToast({
						title:'需填写联系人电话',
						icon:"none"
					})
					return;
				}
				if(!this.area || !this.address){
					uni.showToast({
						title:"地址信息不完整",
						icon:"none"
					})
					return;
				}
				if(!this.image1){
					uni.showToast({
						title:'需上传门头照',
						icon:"none"
					})
					return;
				}
				if(!this.image2){
					uni.showToast({
						title:'需上传营业执照或身份证',
						icon:"none"
					})
					return;
				}
				if(!this.image3){
					uni.showToast({
						title:'需上传易拉宝图片',
						icon:"none"
					})
					return;
				}
				this.tool.getData('User/addShop',{
					memberId:uni.getStorageSync('userId'),
					store_name:this.store_name, 
					trueName:this.trueName, 
					tel:this.tel, 
					province_id:this.province_one.id,
					city_id:this.city_one.id,
					area_id:this.area_one.id,
					area:this.area+this.address, 
					image1:this.image1,
					image2:this.image2,
					image3:this.image3,
					lat:getApp().globalData.lat,
					lng:getApp().globalData.lng,
				}).then(res=>{
					console.log(res);
					if(res){
						uni.showToast({
							title:'信息已保存',
							icon:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 上传视频
			chooseVid(){
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success:(res)=>{
						if(res.tempFilePath){
							this.tool.upImg(res.tempFilePath).then(file=>{
								if(file){
									this.video = file.image_path;
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			checkchoose(type){
				// #ifdef APP-PLUS
				if(!uni.getStorageSync('is_upload')){
					uni.showModal({
						title:'权限申请说明',
						content:'本次申请使用您的相机和存储权限用于上传营业执照，是否同意',
						success:(op)=>{
							if(op.confirm){
								this.chooseImg(type)
							}
						},
					})
				}else{
					this.chooseImg(type)
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				this.chooseImg(type)
				// #endif
			},
			// 上传图片
			chooseImg(type){
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						if(info.tempFiles.length){
							this.tool.upImg(info.tempFiles[0].tempFilePath).then(res=>{
								if(res){
									if(type==1){
										this.image1 = res.image_path;
									}
									if(type==2){
										this.image2 = res.image_path;
									}
									if(type==3){
										this.image3 = res.image_path;
									}
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				// #endif
				// #ifdef APP-PLUS
				uni.chooseImage({
					count:1,
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						uni.setStorageSync('is_upload',1);
						if(info.tempFiles.length){
							this.tool.upImg(info.tempFiles[0].path).then(res=>{
								if(res){
									if(type==1){
										this.image1 = res.image_path;
									}
									if(type==2){
										this.image2 = res.image_path;
									}
									if(type==3){
										this.image3 = res.image_path;
									}
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				// #endif
			},
			
		}
		
	}
</script>

<style lang="scss">
	/*每个页面公共css*/
	@font-face {
		font-family:'itemFont';
		src: url('http://app.gdxixiashi.com/AaHouDiHei.ttf');
	}
	page{
		width: 100%;
		height: 100%;
	}
	.upVid{
		width:120px;
		margin:0 auto;
		text-align: center;
		color:#1664FF;
	}
	.upImg{
		width: 120px;
		margin:0 auto;
	}
	.opAdd {
		overflow: auto;
		padding: 12px 3% 0;
		padding-bottom: 100px;
		box-sizing: border-box;
		.line{
			padding: 14px 3%;
			box-sizing: border-box;
			width: 100%;
			background: white;
			border-radius: 4px;
			margin-bottom:12px;
			.lineTit{
				width: max-content;
			}
			.lineVal{
				flex: 1;
				margin-left: 12px; 
				.showVal{
					text-align:right;
					input{
						text-align: right;
					}
				}
			}
		}
		.btns {
			padding: 40rpx 46rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			.btn {
				width: 100%;
				background: linear-gradient(0deg, #609ff8 0%, #1664ff 100%);
				text-align: center;
				display: block;
				padding: 24rpx 0;
				font-size: 13px;
				color: white;
				border-radius: 80rpx;
			}
		}
	}
	
</style>
